<template>
  <div class="breadcrumb">
    <span>当前位置：</span>
    <el-breadcrumb separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: item.path }" v-for="item in routerBreadcremb" :key="item.path">{{ item.title
        }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
// const router = useRouter();

const routerBreadcremb = ref([]);
// 动态获取路由面包屑
const getRouterBreadcremb = () => {
  console.log("🚀 ~ route:", route)
  let routerObj = [];
  for (let i = 0; i < route.matched.length; i++) {
    if (i != 0) {
      const obj = {
        path: route.matched[i].path,
        title: route.matched[i].meta.title,
      };
      routerObj.push(obj);
    }
    routerBreadcremb.value = routerObj;
  }
};
watch(
  () => route.path,
  () => {
    getRouterBreadcremb();
  }
);

onMounted(() => {
  getRouterBreadcremb();
});
</script>
<style scoped lang="scss">
.breadcrumb {
  display: flex;
  align-items: center;
}
</style>
